<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript轮播图</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      .slide {
        position: relative;
        top: 20px;
        left: 20px;
        width: 800px;
        overflow: hidden;
      }
      .slide-box {
        /* 6个图片加上一个实现无线滚动的头图，一共7个图，7*800 */
        width: 5600px;
        height: 400px;
        font-size: 0;
      }
      .slide img {
        width: 800px;
        display: inline-block;
        vertical-align: top;
      }
    </style>
  </head>
  <body>
    <!-- 视窗容器 -->
    <div class="slide">
      <!-- 滚动容器 -->
      <div class="slide-box">
        <img src="img/1.jpeg" />
        <img src="img/2.jpeg" />
        <img src="img/3.jpeg" />
        <img src="img/4.jpeg" />
        <img src="img/5.jpeg" />
        <img src="img/6.jpeg" />
        <!-- 末尾增加一个开头图片，当滚动到这个图的动画结束后立马把滚动容器的滚动距离设置为视窗容器宽，利用视觉差实现无限滚动 -->
        <img src="img/1.jpeg" />
      </div>
    </div>
  </body>
</html>
<script>
  const Slide = (selector) => {
    // 根据选择器获得元素
    const $el = document.querySelector(selector);
    // 获取元素的宽度，slide每次滚动这个元素的宽
    const width = $el.getBoundingClientRect().width;
    // 获取滚动容器，约定滚动容器有个slide-box的class
    const $scrollEl = $el.querySelector(".slide-box");
    // 获得滚动容器的宽
    const scrollWidth = $scrollEl.getBoundingClientRect().width;
    // 滚动距离
    let scrollLeft = 0;
    // 滚动间隔
    let scrollInterval = 2000;
    // 滚动方法
    const _scroll = () => {
      scrollLeft += width;
      // 最后一张和第一张是一样的，过了最后一张后，把transition去掉并滚动到第一张，利用视觉差回到动画开始
      if (scrollLeft === scrollWidth) {
        scrollLeft = 0;
        $scrollEl.style.transition = "0s";
        $scrollEl.style.transform = `translate3d(-${scrollLeft}px,0,0)`;
        // 上面的代码是立马执行的，这时候图片回到了第一张，因为最后一张和第一张一样么，所以要再立马滚动下一张，滚下一张时候回复transition效果
        scrollLeft += width;
      }

      // 加setTimeout是因为会和上面的transition冲突，导致上面的不生效
      setTimeout(() => {
        $scrollEl.style.transition = "1s";
        $scrollEl.style.transform = `translate3d(-${scrollLeft}px,0,0)`;
      });
    };
    // 增加一个滚动标记，当鼠标移上去时候停止动画，移除时候继续动画
    let flag = true;
    let timer = setInterval(() => {
      if (flag) {
        _scroll();
      }
    }, scrollInterval);
    // 如果想看美女，当鼠标移动上去时候暂停动画
    $el.addEventListener("mouseover", () => (flag = false));
    // 鼠标移除继续动画
    $el.addEventListener("mouseout", () => (flag = true));
  };
  Slide(".slide");
</script>
